<template>
    <div class="app">
        <myNavbar title="选择空桶"></myNavbar>
    <list>
        <cell>
            <div class="food-item-first" v-for="(productListItem, findex) in products">
                <image class="food-item-picture" :src="productListItem.thumbnail"></image>
                <div class="food-item-info">
                    <text class="food-item-title">{{productListItem.name}}</text>
                    <div class="food-item-price">
                        <text class="food-item-money">￥{{productListItem.price}}</text>
                        <button class="payment_isMask_right_button botton_Bg_Color" @click="chooseShop(productListItem)" text="选择空桶" model="gray"></button>
                    </div>
                </div>
            </div>
        </cell>
    </list>
    </div>
</template>

<script>
    const eeui = app.requireModule('eeui');
    const modal = weex.requireModule('modal');
    const storage = weex.requireModule('storage')
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import {
        list
    } from '@/api/product'
    export default {
        data(){
            return{
                products:[]
            }
        },
        created(){
            this.loadProduct()
        },
        components:{
            myNavbar
        },
        methods:{
            loadProduct() {
                list({
                    mchId:this.getGlobalData().mchId,
                    subType: 3,
                    type: 1
                }).then(res => {
                    console.log(res)
                    res.data.data.forEach(item => {
                        item.quantity = 1
                    })
                    this.products = res.data.data
                })
            },
            chooseShop(product){
                eeui.closePage()
                storage.setItem('barrelAdd', JSON.stringify(product), event => {

                })
            }
        }
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }

    .app {
        flex: 1
    }
    .food-item-picture {
        width: 200px;
        height: 200px;
        border-radius: 6px;
        background-color: rgba(0,0,0,0.1);
    }
    .food-item-info {
        margin-left: 20px;
        width: 440px;
        height: 200px;

        position: relative;
    }

    .food-item-title {
        color: #333333;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        max-height: 80px;
        color: rgba(26, 26, 30, 1);
        line-height: 40px;
        lines: 2;
        text-overflow: ellipsis;
    }

    .food-item-price {
        width: 440px;
        flex-direction: row;
        align-items: center;
        position: absolute;
        bottom: 0;
        justify-content: space-between;
    }

    .food-item-money {
        flex: 1;
        font-weight: bold;
        color: #f01414;
        font-size: 30px;
        margin-right: 16px;
    }
    .food-item-first {
        flex-direction: row;
        align-items: flex-start;
        margin-left: 20px;
        margin-top: 20px;
        background-color: white;
        border-radius: 16px;
        padding: 20px;
        width: 710px;
        box-sizing: border-box;
    }
    .payment_isMask_right_button {
        font-size: 20px;
        margin-bottom: 20px;
        width: 100px;
        height: 40px;
    }
</style>
